<template>
	<view class="InventoryList">
		<view class="search">
			<view class="search-box">
				<view class="type" @click="Showpick">
					<text class="c-0c4">{{typeName}}</text>
					<view class="iconfont iconfont-e608 c-0c4"></view>
				</view>
				<view class="iconfont iconfont-e752 u-font-32 c-0c4" style="margin-right: 10rpx;"></view>
				<u-input v-model="search.name" type="text" :border="border" @confirm='onSearch' :clearable='false'
					style="width: 70%;" />

			</view>
			<!-- <u-search placeholder="搜索" v-model="keyword" shape='square':show-action='false' style="width: 100%;"></u-search> -->
			<!-- 			<view class="icon" @click="add">
				<view class="iconfont iconfont-e7a7 c-329 u-font-32"></view>
				<text>新增</text>
			</view> -->
		</view>
		<view class="box" v-for="(item,index) in dataList" :key='index'>
			<view class="box-title">
				<view class="title-left">
					<!-- <u-icon name="photo"></u-icon> -->
					<text class="u-fon-28 fw-bold ml-20">{{type == 1?'出库':'入库'}}类型:{{item.type|inoutType}}</text>
				</view>
				<view class="title-right" @click="open(index)">
					<text class="edit">明细</text>
					<u-icon name="arrow-right" color="#3297ef"></u-icon>
				</view>
			</view>
			<view class="table-item">
				<text class="item-title">单号:</text>
				<text class="item-cont">{{item.number}}</text>
			</view>
			<view class="table-item">
				<text class="item-title">名称:</text>
				<text class="item-cont">{{item.name}}</text>
			</view>
			<view class="table-item">
				<text class="item-title">时间:</text>
				<text class="item-cont">{{formatDate(item.date_time,'YYYY-MM-DD HH:mm:ss')}}</text>
			</view>
			<view class="table-item">
				<text class="item-title">备注:</text>
				<text class="item-cont">{{item.remark?item.remark:'暂无'}}</text>
			</view>
		</view>
		<u-picker v-model="show" mode="selector" :range="type=='1'?outstoctList:instoctList" range-key="label"
			@confirm="choose"></u-picker>
		<sww-load-more :params="dataListParams" @load='loadMore'></sww-load-more>
	</view>
</template>

<script>
	import {
		adminPost
	} from '@/common/http.request.js'
	import {
		mapState,
		mapActions
	} from 'vuex';
	import {
		formatDate
	} from '@/utils/moment/index.js'
	import {
		pagingMixin
	} from '@/mixins/sysPaging.js'
	export default {
		mixins: [pagingMixin],
		data() {
			return {
				formatDate,
				type: '',
				search: {
					name: '',
					type: '1'
				},
				dataList: [],
				typeName: '初始入库',
				show: false,
				instoctList: [{
						label: '初始入库',
						value: '1'
					}, {
						label: '采购入库',
						value: '2'
					}, {
						label: '销售退货入库',
						value: '3'
					},
					{
						label: '其他入库',
						value: '4'
					}, {
						label: '盘盈入库',
						value: '7'
					}
				],
				outstoctList: [{
					label: '销售出库',
					value: '5'
				}, {
					label: '采购退货出库',
					value: '6'
				}, {
					label: '盘亏出库',
					value: '8'
				}, {
					label: '其他出库',
					value: '9'
				}]
			}
		},
		filters: {
			inoutType(val) {
				switch (val) {
					case 1:
						val = '初始入库'
						break;
					case 2:
						val = '采购入库'
						break;
					case 3:
						val = '销售退货入库'
						break;
					case 4:
						val = '其他入库'
						break;
					case 5:
						val = '销售出库'
						break;
					case 6:
						val = '采购退货出库'
						break;
					case 7:
						val = '盘盈入库'
						break;
					case 8:
						val = '盘亏出库'
						break;
					case 9:
						val = '其他出库'
						break;
				}
				return val
			}
		},
		onLoad(options) {
			if (options.type) {
				this.type = options.type
				this.search.type = '5'
				this.typeName = '销售出库'
			}
			// console.log(this.search)
			this.initPage(this.search)
		},
		computed: {
			...mapState(['vuex_adminuser'])
		},
		onReachBottom: function() {
			this.loadMore();
		},
		methods: {
			initPage(params) {
				this._init_data('GetProductStock', {
					pk_id: this.vuex_adminuser.pk_id,
					...params
				})
				// adminPost('GetProductStock', {
				// 	pk_id: this.vuex_adminuser.pk_id,
				// 	...params
				// }).then(res => {
				// 	this.dataList = res.data
				// 	// console.log(res)
				// })
			},
			loadMore() {
				this._load_data()
			},
			Showpick() {
				this.show = true
			},
			onSearch() {
				this.initPage(this.search)
			},
			open(idx) {
				this.$linkTo(`/package/system/erp/stock/stockDetail?index=${idx}&type=${this.type}`)
			},
			choose(val) {
				this.search.type = this.type == '1' ? this.outstoctList[val[0]].value : this.instoctList[val[0]].value
				this.typeName = this.type == '1' ? this.outstoctList[val[0]].label : this.instoctList[val[0]].label
				this.initPage(this.search)
			}
		}
	}
</script>
<style>
	page {
		background-color: #F5F5F5;
	}
</style>
<style lang="scss" scoped>
	.InventoryList {
		.c-329 {
			color: #3297ef;
		}

		.c-0c4 {
			color: #969696;
		}

		.search {
			display: flex;
			align-items: center;
			padding: 20rpx 30rpx;
			background-color: #fff;
			border-top: 1rpx solid #f9f9f9;

			.search-box {
				width: 100%;
				height: 60rpx;
				background-color: #f2f2f2;
				display: flex;
				align-items: center;

				.type {
					display: flex;
					align-items: center;
					margin-right: 10rpx;
					padding: 20rpx;
					font-size: 22rpx;
					position: relative;
					width: 210rpx;

					&::after {
						content: '';
						width: 2rpx;
						height: 26rpx;
						background-color: #ccc;
						position: absolute;
						right: 0;
					}
				}
			}

			.icon {
				display: flex;
				align-items: center;
				margin-left: 20rpx;
				width: 130rpx;

				text {
					margin-left: 10rpx;
				}
			}
		}

		.box {
			width: 690rpx;
			border-radius: 10rpx;
			background-color: #fff;
			padding: 20rpx 30rpx;
			margin: 20rpx 30rpx;

			.box-title {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 20rpx;
				padding-bottom: 20rpx;
				border-bottom: 1px solid #eeeeee;

				.title-left {}

				.title-right {
					.edit {
						color: #3297ef;
						// margin-right: 20rpx;
					}
				}
			}

			.table-item {
				width: 100%;
				display: flex;
				align-items: center;
				padding-bottom: 20rpx;

				.item-title {}

				.item-cont {
					margin-left: 20rpx;
				}
			}
		}
	}
</style>
